<template>
    <div class="sys-search">
        <el-form :model="searchForm" :label-position="$store.labelPosition" label-width="20%">
            <el-col :xs="23" :sm="14">
                <el-form-item label="公司名称：" >
                    <el-input v-model="searchForm.name" placeholder="请输入公司名称"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchCompanysByCriteria()">查询</el-button>
                    <el-button type="edit" icon="el-icon-plus" @click="gotoAddCompany()">添加</el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="deleteCompanys()">删除</el-button>
                </el-form-item>
            </el-col>
        </el-form>

        <table-mixin pagination paginationAlign="left" :paginationTotal="paginationTotal"
                     :pageChange="pageChange">
        <el-table v-loading="tableData.loading" :data="tableData.body"
                  @selection-change="handleSelectionChange" stripe border style="width:100%">
            <el-table-column type="selection"  align="center" width="30"></el-table-column>

            <el-table-column label="公司名称" prop="name" min-width="30%"></el-table-column>
            <el-table-column label="电话" prop="phone" min-width="15%" ></el-table-column>
            <el-table-column label="地址" prop="detailAddress" min-width="30%"></el-table-column>

            <el-table-column label="操作" class-name="centerCell" min-width="15%">
                <template slot-scope="scope">
                    <el-button type="edit" size="small" icon="el-icon-edit"
                        @click="gotoEditCompany(scope.row.id)">编辑</el-button>
                    <el-button type="primary" size="small" icon="el-icon-view"
                        @click="gotoViewCompany(scope.row.id)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        </table-mixin>

    </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
    name: "CompanySearch",
    data() {
        return {
            searchForm: {
                name: ''
            },

            tableData: {
                loading: true,
                body: []
            },
            currentPage: 1,
            paginationTotal: 0,
            selectedCompanys: []
        }
    },

    mounted() {
        this.searchCompanysByCriteria()
    },

    methods: {
        searchCompanysByCriteria(){
            this.currentPage = 1;
            this.searchCompany();
        },

        // 获取table数据
        async searchCompany() {
            console.log("this.currentPage: ", this.currentPage);
            let params = {
                pageSize: this.$store.state.pageSize,
                pageNo: this.currentPage,
                ctype: this.ctype};
            Object.assign(params,this.searchForm);
            console.log("查询公司参数：", params);
            let res = await this.$axios.get('/company/list', params);

            console.log("返回公司列表：", res);
            this.tableData.loading = false;
            this.tableData.body = res.rows;
            this.paginationTotal = res.total;
        },

        pageChange(currentPage) {
            console.log(`当前第${currentPage}页`)
            this.currentPage = currentPage;
            this.searchCompany();
        },

        gotoAddCompany(){
            this.$store.dispatch('company/showEditCompany', -1)
        },

        gotoEditCompany(companyId) {
            this.$store.dispatch('company/showEditCompany', companyId)
        },

        gotoViewCompany(companyId) {
            this.$store.dispatch('company/showViewCompany', companyId)
        },

        handleSelectionChange(val) {
            console.log("选中的元素: ", val); // val 中是所有选中的元素的值
            this.selectedCompanys = val
        },

        deleteCompanys(){
            if(this.selectedCompanys.length === 0){
                this.$myMsg.warning("请选择要删除的公司")
                return;
            }

            this.$confirm('确实要删除选中的公司吗？', '确认信息', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            })
            .then(() => {
                this.actualDeleteCompanys();
            })
            .catch(action => {
                this.$myMsg.info('已放弃删除选中的公司。');
            });
        },

        async actualDeleteCompanys(){
            let companyIds = [];
            for(let tmpCompany of this.selectedCompanys){
                companyIds.push(tmpCompany.id)
            }

            await this.$axios.delete('/company', companyIds);
            this.$myMsg.success('删除成功');
            companyIds = [];
            this.searchCompanysByCriteria();
            this.selectedCompanys=[]
        },
    },
    computed: {
        ...mapState({
            ctype: state => state.company.ctype
        }),

    }
}
</script>

